import { useUserStore } from '@/stores'
import { createRouter, createWebHistory } from 'vue-router'

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false }) //不需要加载时的旋转效果

const router = createRouter({
  // 知识点：createWebHistory表示创建历史模式，创建hash模式使用createWebHashHistory。方法的参数是路由的基础路径，默认
  // 是'/',在vite.config.ts中配置的base路径会传递给这里
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/login', component: () => import('@/views/Login/index.vue'), meta: { title: '登录' } },
    {
      // 知识点【路由path设置】：可以根据所处模块命名，比如都是user模块下的路由，可以把路径设为user/xxx
      path: '/user/patient',
      component: () => import('@/views/User/patientPage.vue'),
      meta: { title: '家庭档案' },
    },
    {
      path: '/consult/fast',
      component: () => import('@/views/Consult/ConsultFast.vue'),
      meta: { title: '极速问诊' },
    },
    {
      path: '/consult/pay',
      component: () => import('@/views/Consult/ConsultPay.vue'),
      meta: { title: '问诊支付' },
    },
    {
      path: '/consult/illness',
      component: () => import('@/views/Consult/ConsultIllness.vue'),
      meta: { title: '病情描述' },
    },
    {
      path: '/consult/dep',
      component: () => import('@/views/Consult/ConsultDep.vue'),
      meta: { title: '选择科室' },
    },
    {
      path: '/user/consult',
      component: () => import('@/views/User/ConsultPage.vue'),
      meta: { title: '问诊记录' },
    },
    {
      path: '/user/consult/:id',
      component: () => import('@/views/User/ConsultDetail.vue'),
      meta: { title: '问诊详情' },
    },
    {
      path: '/room',
      component: () => import('@/views/Room/index.vue'),
      meta: { title: '问诊室' },
      // 知识点【路由守卫】：beforeEnter是路由独享守卫，必须写在路由配置中，不能写在组件内，表示在进入该路由之前触发，可以用来判断路由的传参状态
      // 一般支付成功、失败，都可以从后端返回的支付链接看出来，链接中会带上支付结果的参数，如payResult=true/false
      // 支付失败路由跳转
      beforeEnter(to) {
        if (to.query.payResult === 'false') return '/user/consult'
      },
    },
    {
      path: '/',
      component: () => import('@/views/Layout/index.vue'),
      redirect: '/home',
      children: [
        {
          path: '/home',
          component: () => import('@/views/Home/index.vue'),
          meta: { title: '首页' },
        },
        {
          path: '/user',
          component: () => import('@/views/User/index.vue'),
          meta: { title: '我的' },
        },
        {
          path: '/notify',
          component: () => import('@/views/Notify/index.vue'),
          meta: { title: '消息中心' },
        },
        {
          path: 'article',
          component: () => import('@/views/Article/index.vue'),
          meta: { title: '健康百科' },
        },
      ],
    },
  ],
})

//知识点【vue3路由守卫】： 前置路由守卫，to表示要去的路由（本质上就是上面配置的一条路由规则），from表示来自哪个路由，next表示放行函数
router.beforeEach((to) => {
  // 开启进度条
  NProgress.start()

  const userStore = useUserStore()
  const whileList = ['/login']

  // 知识点【vue3路由守卫】：可以不用next()方法放行请求，直接 返回true表示放行，false表示不放行。 返回路由路径表示跳转
  // 也可以记住这种写法，只需要处理需要跳转到login的判断即可
  if (!userStore.user?.token && !whileList.includes(to.path)) return '/login'
  if (userStore.user?.token && to.path === '/login') return '/home'
})

// 知识点: 在后置路由守卫设置页面标题（推荐）
router.afterEach((to) => {
  document.title = `${to.meta?.title || ''}-优医问诊`
  // 关闭进度条
  NProgress.done()
})

export default router
